"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card, Checkbox, Button } from "antd";
import Image from "next/image";
import Link from "next/link";

interface SpeciesGalleryProps {
    speciesList: {
        id: string; // id 改 string！
        targetName: string;
        image: string;
    }[];
    multiMode: boolean;
}

export default function SpeciesGallery({ speciesList, multiMode }: SpeciesGalleryProps) {
    const router = useRouter();
    const [selectedIds, setSelectedIds] = useState<string[]>([]);

    const onCheck = (id: string, checked: boolean) => {
        setSelectedIds((prev) => {
            if (checked) {
                if (prev.length < 5) return [...prev, id];
                return prev;
            } else {
                return prev.filter((x) => x !== id);
            }
        });
    };

    const goCompare = () => {
        router.push(`/search/compare/${selectedIds.join(",")}`);
    };

    let baseImgPath = process.env.NEXT_PUBLIC_STATIC_URL + "images/";
    console.log(baseImgPath)
    speciesList = speciesList || [];

    return (
        <>
            {multiMode && (
                <div className="mb-4 flex items-center space-x-4">
                    <Button
                        type="primary"
                        disabled={selectedIds.length < 2}
                        onClick={goCompare}
                    >
                        Compare ({selectedIds.length}/5)
                    </Button>
                    <span className="text-gray-600">
                        Please select 2–5 species to compare
                    </span>
                </div>
            )}

            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                {speciesList.map((item:any) => {
                    const imgSrc = `${baseImgPath}${item.targetName}/000001.jpg`;
                    console.log(imgSrc);
                    const cardContent = (
                        <Card
                            hoverable
                            cover={
                                <div className="relative w-full aspect-[4/3]">
                                    <Image
                                        src={imgSrc}
                                        alt={item.targetName}
                                        fill
                                        className="object-cover"
                                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
                                        priority={item.id === 0}
                                        placeholder="empty"
                                    />
                                </div>
                            }
                        >
                            <div className="p-4 text-center text-lg font-semibold">
                                {item.targetName}
                            </div>
                        </Card>
                    );

                    return (
                        <div key={item.id} className="relative">
                            {multiMode && (
                                <Checkbox
                                    className="absolute top-2 left-2 z-10 bg-white/70 rounded"
                                    checked={selectedIds.includes(item.id)}
                                    onChange={(e) =>
                                        onCheck(item.id, e.target.checked)
                                    }
                                />
                            )}

                            {multiMode ? (
                                cardContent
                            ) : (
                                <Link
                                    href={`/search/${item.targetName}?id=${item.id}`}
                                    key={item.id}
                                    className="block"
                                >
                                    {cardContent}
                                </Link>
                            )}
                        </div>
                    );
                })}
            </div>
        </>
    );
}
